<%--
  Created by IntelliJ IDEA.
  User: 91658
  Date: 2018/6/8
  Time: 10:20
  记账管理
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>记账</title>
    <%@ include file="../common/common.jsp" %>
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <%@ include file="../common/head.jsp" %>
        <%@ include file="../common/left.jsp" %>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 1%;">
                <div id="addChargeDiv" style="padding: 20px;border: 1px dashed;">
                    <form class="layui-form" onsubmit="return false;">
                        <table class="layui-table">
                            <colgroup>
                                <col width="150">
                                <col width="150">
                                <col width="150">
                                <col width="100">
                                <col width="300">
                                <col width="150">
                                <col width="150">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>账户</th>
                                <th>类型</th>
                                <th>账目</th>
                                <th>金额</th>
                                <th>备注</th>
                                <th>时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <label>
                                        <select lay-search="" class="account-id">
                                            <option value="">选择/搜索</option>
                                            <c:forEach items="${accountList}" var="account">
                                                <option value="${account.id}">${account.accountName}</option>
                                            </c:forEach>
                                        </select>
                                    </label>
                                </td>
                                <td>
                                    <label>
                                        <select class="payments-type" lay-filter="payments-type">
                                            <option value="">选择</option>
                                            <option value="1">支出</option>
                                            <option value="2">收入</option>
                                        </select>
                                    </label>
                                </td>
                                <td>
                                    <label>
                                        <select lay-search="" class="project-id">
                                            <option value="">选择/搜索</option>
                                        </select>
                                    </label>
                                </td>
                                <td>
                                    <input type="text" placeholder="金额" autocomplete="off" class="layui-input money">
                                </td>
                                <td>
                                    <input type="text" placeholder="备注" autocomplete="off" class="layui-input remark">
                                </td>
                                <td>
                                    <input type="text" placeholder="时间" autocomplete="off" class="layui-input create-time" id="createTime1">
                                </td>
                                <td>
                                    <button class="layui-btn layui-btn-sm" onclick="addRow(this);">
                                        <i class="layui-icon">&#xe654;</i>
                                    </button>
                                    <button class="layui-btn layui-btn-sm" onclick="delRow(this);">
                                        <i class="layui-icon">&#xe640;</i>
                                    </button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
                <div id="addBtnDiv" style="position: absolute;top: 85%;left: 90%;">
                    <button class="layui-btn" id="addCharge">新增</button>
                </div>
            </div>
        </div>
        <%@ include file="../common/bottom.jsp" %>
    </div>
</body>
<script type="text/javascript">
    var _index = 1;
    var form, laydate, table, layer;
    layui.use(['form', 'laydate', 'table', 'layer'], function(){
        var $ = layui.jquery;
        form = layui.form;
        laydate = layui.laydate;
        table = layui.table;
        layer = layui.layer;

        form.render('select');

        //日期
        laydate.render({
            elem: '#createTime1'
        });

        $("#addCharge").click(function () {
            var _status = checkForm();
            if (_status) {
                var chargeList = getForm();
                $.ajax({
                    url: '/charge/add_charge',
                    type: 'POST',
                    data:JSON.stringify(chargeList),
                    dataType: 'JSON',
                    contentType:'application/json;charset=UTF-8',
                    success: function (result) {
                        var status = result.status;
                        var message = result.message;
                        if (status === 1) {
                            layer.confirm('操作成功,是否刷新本页面?', {icon: 3, title:'提示'}, function(index){
                                window.location.reload();
                            });
                        } else if (status === 2) {
                            layer.msg(message, {icon: status});
                        }
                    },
                    error: function () {
                        layer.msg("操作异常,程序猿正在紧急修复!", {icon: 5});
                    }
                })
            }
        });

        form.on('select(payments-type)', function(data){
            var _this = data.elem;
            var _project = $(_this).parent().parent().parent().find(".project-id");
            _project.empty();
            _project.append("<option value=''>选择/搜索</option>");
            $.ajax({
                url: '/charge/project_list',
                type: 'get',
                data: {
                    "paymentsType" : data.value
                },
                dataType: 'json',
                async: false,
                success: function (result) {
                    var data = result.data;
                    for (var i = 0;i < data.length;i++) {
                        _project.append("<option value='"+data[i].projectId+"'>"+data[i].projectName+"</option>");
                    }
                    form.render('select');
                }
            });
        });

    });

    function addRow(_this) {
        var _tr = $(_this).parent().parent();
        var _trHtml = _tr.html();
        var _afterHtml = "<tr>" + _trHtml + "</tr>";
        _tr.after(_afterHtml);

        var _nextTr = _tr.next();
        var _account = $(_nextTr).find(".account-id");
        _account.empty();
        _account.append("<option value=''>选择/搜索</option>");
        $.ajax({
            url: '/account/account_list',
            type: 'get',
            dataType: 'json',
            async: false,
            success: function (result) {
                var data = result.data;
                for (var i = 0;i < data.length;i++) {
                    _account.append("<option value='"+data[i].id+"'>"+data[i].accountName+"</option>");
                }
            }
        });
        // 重新加载下拉框
        form.render('select');

        // 重新加载时间控件
        _index = _index + 1;
        var _newId = "createTime" + _index;
        $(_nextTr).find(".create-time").attr({"id":_newId,"lay-key":_index});
        //日期
        laydate.render({
            elem: '#' + _newId
        });
//        console.log($(_nextTr).html());

    }

    function delRow(_this) {
        var _trNum = $("tr").length;
        // 仅剩一行时 不删除
        if (_trNum === 2) {
            return;
        }
        var _tr = $(_this).parent().parent();
        _tr.remove();
    }

    function checkForm() {
        var _status = true;
        var _trArray = $("tr");
        for (var i = 1;i < _trArray.length;i++) {
            var _tr = $(_trArray[i]);
            var accountId = _tr.find(".account-id").val();
            if (accountId === null || accountId === '') {
                layer.msg('请选择账户', {icon: 5});
                _status = false;
                break;
            }
            var paymentsType = _tr.find(".payments-type").val();
            if (paymentsType === null || paymentsType === '') {
                layer.msg('请选择记账类型', {icon: 5});
                _status = false;
                break;
            }
            var projectId = _tr.find(".project-id").val();
            if (projectId === null || projectId === '') {
                layer.msg('请选择收支类型', {icon: 5});
                _status = false;
                break;
            }
            var money = _tr.find(".money").val();
            if (money === null || money === '') {
                layer.msg('请输入金额', {icon: 5});
                _status = false;
                break;
            }
            var createTime = _tr.find(".create-time").val();
            if (createTime === null || createTime === '') {
                layer.msg('请输入时间', {icon: 5});
                _status = false;
                break;
            }
        }
        return _status;
    }
    function getForm() {
        var chargeList = [];
        var _trArray = $("tr");
        for (var i = 1;i < _trArray.length;i++) {
            var _tr = $(_trArray[i]);
            var accountId = _tr.find(".account-id").val();
            var paymentsType = _tr.find(".payments-type").val();
            var projectId = _tr.find(".project-id").val();
            var money = _tr.find(".money").val();
            var remark = _tr.find(".remark").val();
            var createTime = _tr.find(".create-time").val();
            var charge = {"accountId" : accountId, "paymentsType" : paymentsType, "projectId" : projectId,
                "money" : money, "remark": remark, "createTime" : createTime};
            chargeList.push(charge);
        }
        return chargeList;
    }
</script>
</html>
